﻿﻿@model WebApp.Models.Employee
<!-- 弹出窗体form表单 -->
 <div id="detailswindow" hidden="hidden" class="easyui-window" 
      title="明细数据" 
      data-options="modal:true,
                    closed:true,
                    maximized:false,
                    iconCls:'icon-more',
                    footer:'#windowfooter',
                    closeDuration:200,
                    closeAnimation:'slide',
                    openDuration:300,
                    openAnimation:'slide',
                    onBeforeClose:function(){
                      var that = $(this);
                      if(hasmodified()){
                        $.messager.confirm('确认','你确定要放弃保存修改的记录?',function(r){
                        if (r){
                          var opts = that.panel('options');
                          var onBeforeClose = opts.onBeforeClose;
                          opts.onBeforeClose = function(){};
                          that.panel('close');
                          opts.onBeforeClose = onBeforeClose;
                        }
                        });
                        return false;
                      }
                    },
                    onOpen:function(){
                       $(this).window('vcenter');
                       $(this).window('hcenter');
                    },
                    onRestore:function(){
                    },
                    onMaximize:function(){
                    }
                    " style="width:1420px;height:520px">
    <!-- begin toolbar -->
    <div class="window-body-toolbar">
        <div class="row">
            <div class="col-sm-8">
                <div class="btn-group btn-group-sm">
                       <button onclick="saveitem()" class="btn btn-default"> 
                          <i class="fa fa-floppy-o"></i> @Html.L("Save") 
                       </button>
                </div>
                <div class="btn-group btn-group-sm" id="deleteitem-btn-group">
                  <button onclick="deleteitem()" class="btn btn-danger">
                    <i class="fa fa-trash-o"></i> @Html.L("Delete")
                  </button>
                </div>
                <div class="btn-group btn-group-sm" style="display:none">
                    <button onclick="todo()" class="btn btn-default">
                        <i class="fa fa-print"></i> ToDo
                    </button>
                </div>
            </div>
            <div class="col-sm-4 text-align-right">
              <div class="btn-group btn-group-sm">
                <button type="button" class="btn   btn-success" onclick="closedetailwindow()">
                    <i class="fa fa-chevron-left"></i>
                    @Html.L("Close")
                </button>
              </div>
            </div>
        </div>
    </div>
    <!-- end toolbar -->
    <!-- begin window body -->
    <div class="widget-body">
           <form id="employee_form" 
              class="easyui-form form-horizontal padding-10" 
              method="post" 
              data-options="novalidate:true,
                            onChange: function(target){
                              hasChanged = true;
                             },
                             onLoadSuccess:function(data){
                               hasChanged = false;
                             }">
  @Html.AntiForgeryToken()
   <!--Primary Key-->
  <input type="hidden" id="@Html.IdFor(model => model.Id)" 
                       name="@Html.NameFor(model => model.Id)" 
                       value="@Html.ValueFor(model => model.Id)" />
   <fieldset>
<!-- begin row -->
   <!--姓名-->
  <div class="form-group  col-md-3">
        <label class="col-md-3 control-label"><span class="required">@Html.DisplayNameFor(model => model.Name)</span></label>
		<div class="col-md-9">  
			<input id="@Html.IdFor(model => model.Name)" 
				   name="@Html.NameFor(model => model.Name)" 
				   value="@Html.ValueFor(model => model.Name)"
				   tabindex="0" required
				   class="easyui-textbox" 
                   style="width:100%"
				   type="text" 
				   data-options="prompt:'@Html.DisplayNameFor(model => model.Name)',
								 required:true, 
                                 validType: 'length[0,20]'
                                 " />
       </div>
  </div>
				      <!--职位-->
  <div class="form-group  col-md-3">
        <label class="col-md-3 control-label">@Html.DisplayNameFor(model => model.Title)</label>
		<div class="col-md-9">  
			<input id="@Html.IdFor(model => model.Title)" 
				   name="@Html.NameFor(model => model.Title)" 
				   value="@Html.ValueFor(model => model.Title)"
				   tabindex="1" 
				   class="easyui-textbox" 
                   style="width:100%"
				   type="text" 
				   data-options="prompt:'@Html.DisplayNameFor(model => model.Title)',
								 required:false, 
                                 validType: 'length[0,30]'
                                 " />
       </div>
  </div>
				      <!--性别-->
  <div class="form-group  col-md-3">
        <label class="col-md-3 control-label"><span class="required">@Html.DisplayNameFor(model => model.Sex)</span></label>
		<div class="col-md-9">  
			<input id="@Html.IdFor(model => model.Sex)" 
				   name="@Html.NameFor(model => model.Sex)" 
				   value="@Html.ValueFor(model => model.Sex)"
				   tabindex="2" required
				   class="easyui-textbox" 
                   style="width:100%"
				   type="text" 
				   data-options="prompt:'@Html.DisplayNameFor(model => model.Sex)',
								 required:true, 
                                 validType: 'length[0,10]'
                                 " />
       </div>
  </div>
				      <!--年龄-->
   <div class="form-group  col-md-3">
       <label class="col-md-3 control-label"><span class="required">@Html.DisplayNameFor(model => model.Age)</span></label>
	   <div class="col-md-9">  
			<input id="@Html.IdFor(model => model.Age)"
				   name="@Html.NameFor(model => model.Age)" 
				   value="@Html.ValueFor(model => model.Age)"
				   tabindex="3" 
				   class="easyui-numberbox" 
                   style="width:100%"
				   type="text" 
				   data-options="prompt:'@Html.DisplayNameFor(model => model.Age)',
								 required:true,
                                 validType:'integer',
                                 
                                 " />
      </div>
   </div>
				          <!--end row-->
	   <!-- begin row -->
   <!--出生日期-->
  <div class="form-group  col-md-3">
        <label class="col-md-3 control-label"><span class="required">@Html.DisplayNameFor(model => model.Brithday)</span></label>
		<div class="col-md-9">  
                <input id="@Html.IdFor(model => model.Brithday)" 
			       name="@Html.NameFor(model => model.Brithday)"
                   value="@Html.ValueFor(model => model.Brithday)"
           		   tabindex="4"  required
				   class="easyui-datebox" 
                   style="width:100%"
				   type="text" 
				   data-options="prompt:'@Html.DisplayNameFor(model => model.Brithday)',
								 required:true,
								 formatter:dateformatter" />
     </div>
   </div>
				      <!--是否已离职-->
   <div class="form-group  col-md-3">
       <label class="col-md-3 control-label"><span class="required">@Html.DisplayNameFor(model => model.IsDeleted)</span></label>
	   <div class="col-md-9">  
			<input id="@Html.IdFor(model => model.IsDeleted)"
				   name="@Html.NameFor(model => model.IsDeleted)" 
				   value="@Html.ValueFor(model => model.IsDeleted)"
				   tabindex="5" 
				   class="easyui-numberbox" 
                   style="width:100%"
				   type="text" 
				   data-options="prompt:'@Html.DisplayNameFor(model => model.IsDeleted)',
								 required:true,
                                 validType:'integer',
                                 
                                 " />
      </div>
   </div>
				       <!--公司-->
    <div class="form-group  col-md-3">
        <label class="col-md-3 control-label"><span class="required">@Html.DisplayNameFor(model => model.CompanyId)</span></label>
		<div class="col-md-9">   	
            <input id="@Html.IdFor(model => model.CompanyId)"
			       name="@Html.NameFor(model => model.CompanyId)"
				   value="@Html.ValueFor(model => model.CompanyId)"
                   tabindex="6" required
              	   class="easyui-combobox"      
                   style="width:100%"
                   data-options="prompt:'@Html.DisplayNameFor(model => model.CompanyId)' ,
						required:true ,
						valueField: 'Id',
						textField:  'Name' ,
						url: '/Employees/GetCompaniesAsync' ,
						onSelect: function(item){
						//console.log(item);
				}">
       </div>
    </div>
	   	             <!--end row-->
	      </fieldset>
   </form>

<!--end form表单界面-->
<!--========================================================================================-->
     </div>
    <!--end window body -->
</div>
<div id="windowfooter" style="padding:5px;">&nbsp;</div>
<!-- 弹出窗体form表单 -->
<!-- 弹出编辑对话框 -->

<!--begin popup detailview javascript block -->
<script type="text/javascript">
    //判断新增编辑状态
    var MODELSTATE = 'Added';
    var employeeid = null;
    var hasChanged = false;
    function opendetailwindow(data,state) {
         MODELSTATE = state;
         initdetailview();
         employeeid = (data.Id || 0);
         $("#detailswindow").window("open");
         $('#employee_form').form('reset');
         $('#employee_form').form('load', data);
             }
  //删除当前记录
  function deleteitem() {
    $.messager.confirm('确认', '你确定要删除该记录?', result => {
      if (result) {
        const url = `/Employees/DeleteAsync/${employeeid}`;
        $.get(url).done(res => {
          if (res.success) {
            toastr.success("删除成功");
            $dg.datagrid('reload');
            $("#detailswindow").window("close");
          } else {
            $.messager.alert("错误", res.err, "error");
          }
        });
      }
    });
  }
    //async 保存数据
    async function saveitem() { 
      var $editform = $('#employee_form');
      if ($editform.form('enableValidation').form('validate')) {
            let employee = $editform.serializeJSON();
                        let url = '/Employees/EditAsync';
            //判断是新增或是修改方法
            if (MODELSTATE === 'Added') {
                url = '/Employees/CreateAsync';
            }
            var token = $('input[name="__RequestVerificationToken"]', $editform).val();
            $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        __RequestVerificationToken: token,
                        employee:employee
                    },
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded; charset=utf-8'
                })
                .done(response => {
                    if (response.success) {
                        hasChanged = false;
                        $editform.form('disableValidation');
                        $dg.datagrid('reload');
                        $('#detailswindow').window("close");
                        toastr.success("保存成功");  
                    } else {
                        $.messager.alert("错误",   response.err, "error");
                    }
                    })
                .fail((jqXHR, textStatus, errorThrown) => {
                       $.messager.alert('异常', `${jqXHR.status}: ${jqXHR.statusText} `, 'error');
                    });
        }
    }
    //关闭窗口
    function closedetailwindow() {
        $('#detailswindow').window('close');
    }
    //todo
    function todo() {
         console.log('todo.....');
    }
     //判断是否有没有保存的记录
     function hasmodified() {
            return hasChanged;

     }


function initdetailview() {
  //判断是否显示功能按钮
  if (MODELSTATE === 'Added') {
    $('#deleteitem-btn-group').hide();
  } else {
    $('#deleteitem-btn-group').show();
  }
 
//回车光标移动到下个输入控件
    //如果是枚举类型需要把numberbox改成combobox
    //年龄
	$('#Age').numberbox('textbox').bind('keydown', function (e) {
      if (e.keyCode == 13) {
        $(e.target).emulateTab();
      }
    });
    //如果是枚举类型需要把numberbox改成combobox
    //是否已离职
	$('#IsDeleted').numberbox('textbox').bind('keydown', function (e) {
      if (e.keyCode == 13) {
        $(e.target).emulateTab();
      }
    });
    //日期类型 出生日期
	$('#Brithday').datebox('textbox').bind('keydown', function (e) {
      if (e.keyCode == 13) {
        $(e.target).emulateTab();
      }
    });
    //公司默认外键使用combobox,也可以使用combogrid
	$('#CompanyId').combobox('textbox').bind('keydown', function (e) {
      if (e.keyCode == 13) {
        $(e.target).emulateTab();
      }
    });
}
</script>

